window.onload = function () {
  let $el = document.querySelectorAll('.remain-container .tab li');
  let len = $el.length;
  for (let i = 0; i < $el.length; i++) {
    $el[i].onclick = function () {
      for (let j = 0; j < len; j++) {
        $el[j].className = "";
      }
      this.className = "active";
    }
  }
  let windowHeight = $('.remain-container').height() + $('.tab').height();
  $body = $("body");
  $body.css("height", windowHeight); //重要代码

  function tabToRight() {
    for (let i = 0; i < len; i++) {
      if ($el[i].className === 'active') {
        for (let j = 0; j < len; j++) {
          $el[j].className = "";
        }
        if (i < 2) {
          $el[i + 1].className = 'active';
          return
        } else {
          $el[0].className = 'active';
          return
        }
      }
    }
  }

  function tabToLeft() {
    for (let i = 0; i < len; i++) {
      if ($el[i].className === 'active') {
        if (i === 0) {
          return
        } else {
          for (let j = 0; j < len; j++) {
            $el[j].className = "";
          }
          $el[i - 1].className = 'active';
          return
        }
      }
    }
  }

  let toughNum;
  $(".remain-container .projects").on("touchstart", function (e) {
    toughNum = 0;
    // e.preventDefault();
    startX = e.originalEvent.changedTouches[0].pageX;
    startY = e.originalEvent.changedTouches[0].pageY;
  });

  $(".remain-container .projects").on("touchmove", function (e) {
    toughNum += 1;
    if (toughNum > 1) {
      return;
    }
    // e.preventDefault();
    moveEndX = e.originalEvent.changedTouches[0].pageX,
      moveEndY = e.originalEvent.changedTouches[0].pageY,
      X = moveEndX - startX,
      Y = moveEndY - startY;
    console.log(Math.abs(X) + '---' + Math.abs(Y) + '----' + X)
    if (Math.abs(X) > Math.abs(Y) && X > 0) {
      tabToLeft()
      return false
    }
    else if (Math.abs(X) > Math.abs(Y) && X < 0) {
      tabToRight()
      return false
    }
  });
};